<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 500px;
				height: 700px;
				background: rgb(221,222,224);
			}
			#header{
				overflow: hidden;
			}
			#header p:nth-of-type(1){
				float: left;
				padding-left: 20px;
				font-size: 25px;
			}
			#header p:nth-of-type(2){
				float: right;
				padding-right: 20px;
				font-size: 25px;
			}
			#bianhua{
				font-size: 200px;
				text-align: center;
				line-height: 350px;
				color: yellow;
			}
			#kaishi{
				padding: 10px;
				font-size: 40px;
			}
			#lv{
				font-size: 90px;
				float: left;
				padding: 5px;
				/*display: none;*/
				color: yellow;
			}
			
			#lan{
				font-size: 90px;
				float: left;
				padding: 5px;
				/*display: none;*/
				color: black;
			}
			#hei{
				font-size: 90px;
				float: left;
				padding: 5px;
				/*display: none;*/
				color: blue;
			}
			#hong{
				font-size: 90px;
				float: left;
				padding: 5px;
				/*display: none;*/
				color: red;
			}
			#huang{
				font-size: 90px;
				float: left;
				padding: 5px;
				/*display: none;*/
				color: green;
			}
			#box1{
				width: 500px;
				height: 300px;
				position: absolute;
				top:350px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="header">
				<p id="youxi">游戏时间：5</p>
				<p id="wancheng">完成个数：0</p>
			</div>
			<p id="bianhua">红</p>
			<div id="box1">
				<div id="kaishi">根据上面的字的颜色从下面选择正确的字，选择正确自动开始</div>
				<p id="lv">绿</p>
				<p id="lan">蓝</p>
				<p id="hei">黑</p>
				<p id="hong">红</p>
				<p id="huang">黄</p>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var youXiShiJian = document.getElementById("youxi");
		var count = 5;
		var shiJian = false;
//		var zhenJia = true;
		//时间上的逐秒递减，完成在屏幕上的显示，并且在时间到0之后，给出成绩的判断。
		var timer = setInterval(function(){
			if(shiJian == true){
				count--;
//				alert(count);
				youXiShiJian.innerHTML = "游戏时间："+count;
				if(count <= 0){
					gameOver();
					//当时间到0s以后，清除定时器。
					clearInterval(timer);
					daTi = false;
				}
			}
		},1000);
		//定义 字和颜色，，这样有两个数组以后，就可以有随机的字和随机的颜色来调用；
		//一定要文字和颜色对应，因为后面要把字和颜色比较，这样是最方便的
		var wenZi = ["绿","红","黄","黑","蓝"];
		var yanSe = ["green","red","yellow","black","blue"];
		//函数得到一个0，1，2，3，4五个整数，但是每一次调用可能会重复。
		function xunHuanShu(s){
			var rand = Math.round(Math.random()*s);
			return rand;
		}
		//核心：如何选取不重复的五个随机数
		function buChongFu(){
			var arr = [];
			//当arr数组因为重复问题不往里面push数字的时候，他会无限循环，直到随机到跟前面每一个都不重复的数字。
			//最终选到五个不重复的数字放到arr数组里面。而且有且只有这五个数字
			while(arr.length < 5){
				var rand = xunHuanShu(4);
				var bol = true;
				for(var i = 0;i < arr.length;i++){
					//当重复的时候不往arr里面放
					if(arr[i] == rand){
						bol = false;
						//break是为了提升效率！！！
						break;
					}
				}
				if(bol){
					arr.push(rand);
				}
			}
//			alert(arr);
//while循环结束，返回数组；
			return arr;
		}
		var pColorArray;
		var boxA = document.getElementById("box1");
		var pElements = boxA.getElementsByTagName("p");
//		console.log(pElements);
//下面五个字选取不同的字和不同的颜色，，，排列出来
		function pFont(){
			var pFontArray = buChongFu();
//			alert(pFontArray);
			var pColorArray = buChongFu();
			for(var i = 0;i < pElements.length;i++){
				pElements[i].style.color = yanSe[pColorArray[i]];
				pElements[i].innerHTML = wenZi[pFontArray[i]];
				//自定义新属性
				//目的：记住当时选用的这个字的下标（因为一会要判断对错，）
				pElements[i].fontIndex = pFontArray[i];
			}
		}
		//因为每次刷新都要随机一次，所以要先调用一次；
		pFont();
		var bianHuan = document.getElementById("bianhua");
		//设置全局变量，方便后面调用
		var bianHuanYanSe;
		//让中间的大字随机颜色，随机文字；
		function yanSeBianHua(){
			var bianHuaFont = xunHuanShu(4);
//			alert(bianHuaFont);
//			记住中间字的颜色，后面会有比较；
			bianHuanYanSe = xunHuanShu(4);
			bianHuan.style.color = yanSe[bianHuanYanSe];
//			alert(yanSe[bianHuanYanSe]);
			bianHuan.innerHTML = wenZi[bianHuaFont];
			//也可以用自定义属性记录颜色所对应的下标。
		}
		//也要先调用一次
		yanSeBianHua();
		var wan = document.getElementById("wancheng");
		var geShu = 0;
		//定义一个是否可以答题的变量
		var daTi = true;
		for(var i = 0;i < pElements.length;i++){
//			if(daTi == true){
				pElements[i].onclick = function(){
					if(this.fontIndex == bianHuanYanSe && daTi == true){
						shiJian = true;
						geShu++;
						wan.innerHTML = "完成个数：" + geShu;
						pFont();
						yanSeBianHua();
					}
				}
//			}	
		}
		//统计个数，然后给出成绩
		function gameOver(){
			if(geShu <= 2 ){
				alert("帅!!!");
			}else if(geShu <= 5){
				alert("有点帅!!!");
			}else if(geShu <= 10){
				alert("你好帅!!!");
			}else{
				alert("6666666");
			}
		}
	</script>
</html>